<template>
  <div class="dy-main InsuranceInfo">
    <div class="dy-header">
      <x-header :right-options="{showMore: false}" :left-options="{preventGoBack:true}" @on-click-back="back">客户与投保单信息</x-header>
    </div>
    <div class="dy-body">
      <scroller lock-x height="100%" ref="scroller">
        <div class="bodyInfo">
          <div class="titleMsg">客户信息</div>
          <group gutter="0">
            <cell :title="('姓名')" :value="AppntName_CN"></cell>
            <cell :title="('性别')" :value="AppntSex"></cell>
            <cell :title="('国籍')" :value="AppntNativePlace"></cell>
            <cell :title="('出生日期')" :value="AppntBirthday"></cell>
            <cell :title="('证件类型')" :value="AppntIDType"></cell>
            <cell :title="('证件号码')" :value="AppntIDNo"></cell>
            <cell :title="('证件有效期')" :value="AppntIDEndDate"></cell>
            <cell :title="('邮寄地址')" @click.native="showPopupPicker1 = true" :value="value1[0]" is-link></cell>
            <x-input title="保单寄送地址" v-model="mailAddress" placeholder="请输入保单寄送地址" text-align="right">
              <span slot="label">保单寄送地址<span class="dy-start">*</span></span>
            </x-input>
            <x-input title="保单寄送地址邮编" v-model="mailAddressPostCode" placeholder="请输入邮编" text-align="right"></x-input>
            <cell :title="('职业代码')" @click.native="showPopupPicker2 = true" :value="value2[0]" is-link></cell>
            <x-input title="电子邮件" v-model="mailAddress" placeholder="请输入邮箱地址" text-align="right">
              <span slot="label">电子邮件<span class="dy-start">*</span></span>
            </x-input>
            <cell :value="healthyInform">
              <span slot="title">健康状况告知<span class="dy-start">*</span></span>
              <span style="display: inline-block; width: 4rem; text-align: left; color: blue; font-size: 0.3rem;">请点击阅读并选择</span>
            </cell>
            <cell title="居民类型" :value="radioVal1">
              <span slot="title">居民类型<span class="dy-start">*</span></span>
              <zx-radio style="width: 4.3rem; text-align: left;" :data="['城镇', '农村']" :checkVal="0" @on-chang="radioChange"></zx-radio>
            </cell>
            <x-input title="保单寄送地址邮编" v-model="mailAddressPostCode" placeholder="请输入邮编" text-align="right"></x-input>
            <cell :title="('保单提供方式')" @click.native="showPopupPicker3 = true" :value="value3[0]" is-link></cell>
            <cell :title="('争议处理方式')" @click.native="showPopupPicker4 = true" :value="value4[0]" is-link></cell>
            <cell :title="('被保险人')" @click.native="showPopupPicker5 = true" :value="value5[0]" is-link></cell>
            <cell :title="('受益人为')" @click.native="showPopupPicker6 = true" :value="value6[0]" is-link></cell>
          </group>
          <div class="titleMsg">险种信息</div>
          <group gutter="0">
            <cell :title="('主产品代码')" :value="MainRiskCode"></cell>
            <cell :title="('产品名称')" :value="prdName"></cell>
            <cell :title="('保险期间')" @click.native="showPopupPicker7 = true" :value="value7[0]" is-link></cell>
            <cell :title="('缴费期间')" @click.native="showPopupPicker8 = true" :value="value8[0]" is-link></cell>
            <x-input title="保费" v-model="premium" placeholder="请输入保费" text-align="right">
              <span slot="label">保费<span class="dy-start">*</span></span>
            </x-input>
            <cell :title="('起点金额')" :value="startAmount"></cell>
            <cell :title="('最小单位')" :value="minUnit"></cell>
            <cell :title="('缴费间隔')" @click.native="showPopupPicker9 = true" :value="value9[0]" is-link></cell>
            <cell :title="('首期账号')" @click.native="showPopupPicker10 = true" :value="value10[0]" is-link></cell>
            <cell :title="('可用余额')" :value="AvailableBalance"></cell>
            <cell title="续期账号是" :value="radioVal2">
              <zx-radio style="width: 4.3rem; text-align: left;" :data="['首期账号', '其他账号']" :checkVal="0" @on-chang="radioChange"></zx-radio>
            </cell>
            <cell :title="('风险提示')" @click.native="showPopupPicker11 = true" :value="value11[0]" is-link></cell>
          </group>
          <div class="checkClause">
            <div class="leftCheck">
              <div class="box" @click="checkClick1"><img v-if="checked1 === true" class="checkIcon" src="../../assets/img/Insurance/check.png"></div>
            </div>
            <div class="rightText">
              本人已认真阅读并充分理解<span>《产品条款》、</span><span>《保投保协议书》、</span><span>《投保人/被保险人声明》</span>的内容（特别是保险产品条款中的责任免除内容），阅读并知悉我行官方网站保险产品<span>信息披露</span>专栏的告知内容
            </div>
          </div>
          <div class="checkClause">
            <div class="leftCheck">
              <div class="box" @click="checkClick2"><img v-if="checked2 === true" class="checkIcon" src="../../assets/img/Insurance/check.png"></div>
            </div>
            <div class="rightText rightText2">
              <span>个人客户非美国纳税居民身份确认</span>
            </div>
          </div>
          <div class="nextButton" @click="gotoBuySure()">下一步</div>
          <div class="tipMsg">
            <p>温馨提示</p>
            <p>如投保人填写的年收入低于当地省级统计部门公布的最近年 度城镇居民人均可支配收入或农村居民人均纯收入，核保结果以保险公司的核保结果为准</p>
            <p>对于65周岁（含）以上的高龄客户，为保障您的合法权益，在手机银行渠道不可以购买任何产品，详询客户经理。</p>
          </div>
          <group>
            <popup-picker :show.sync="showPopupPicker1" :show-cell="false" :data="list1" v-model="value1"></popup-picker>
            <popup-picker :show.sync="showPopupPicker2" :show-cell="false" :data="list2" v-model="value2"></popup-picker>
            <popup-picker :show.sync="showPopupPicker3" :show-cell="false" :data="list3" v-model="value3"></popup-picker>
            <popup-picker :show.sync="showPopupPicker4" :show-cell="false" :data="list4" v-model="value4"></popup-picker>
            <popup-picker :show.sync="showPopupPicker5" :show-cell="false" :data="list5" v-model="value5"></popup-picker>
            <popup-picker :show.sync="showPopupPicker6" :show-cell="false" :data="list6" v-model="value6"></popup-picker>
            <popup-picker :show.sync="showPopupPicker7" :show-cell="false" :data="list7" v-model="value7"></popup-picker>
            <popup-picker :show.sync="showPopupPicker8" :show-cell="false" :data="list8" v-model="value8"></popup-picker>
            <popup-picker :show.sync="showPopupPicker9" :show-cell="false" :data="list9" v-model="value9"></popup-picker>
            <popup-picker :show.sync="showPopupPicker10" :show-cell="false" :data="list10" v-model="value10"></popup-picker>
            <popup-picker :show.sync="showPopupPicker11" :show-cell="false" :data="list11" v-model="value11"></popup-picker>
          </group>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      mailAddress: '',
      mailAddressPostCode: '',
      healthyInform: '请点击阅读并选择',
      radioVal1: '',
      premium: '',
      radioVal2: '',
      checked1: false,
      checked2: false,
      value1: ['请选择'],
      list1: [['请选择', '上海市浦东新区', '北京市朝阳区', '北京市大兴区']],
      value2: ['请选择'],
      list2: [['请选择', '企业经理', '技术人员', '服务人员', '其他']],
      value3: ['请选择'],
      list3: [['请选择', '电子文件', '纸质文件', '其他']],
      value4: ['请选择'],
      list4: [['请选择', '公开调解', '私人调解', '其他']],
      value5: ['请选择'],
      list5: [['请选择', '张三', '李四', '王五', '马六']],
      value6: ['请选择'],
      list6: [['请选择', '本人', '父母', '妻子', '子女']],
      value7: ['请选择'],
      list7: [['请选择', '终身', '50年', '20年']],
      value8: ['请选择'],
      list8: [['请选择', '1年', '2年', '3年', '4年', '5年', '6年', '7年', '8年', '9年', '10年', '11年', '12年', '13年', '14年', '15年']],
      value9: ['请选择'],
      list9: [['请选择', '1年', '2年', '3年', '4年', '5年', '6年']],
      value10: ['请选择'],
      list10: [['请选择', '11111111111111111', '2222222222222222', '3333333333333333']],
      value11: ['请选择'],
      list11: [['请选择', '高风险', '中风险', '低风险']],
      showPopupPicker1: false,
      showPopupPicker2: false,
      showPopupPicker3: false,
      showPopupPicker4: false,
      showPopupPicker5: false,
      showPopupPicker6: false,
      showPopupPicker7: false,
      showPopupPicker8: false,
      showPopupPicker9: false,
      showPopupPicker10: false,
      showPopupPicker11: false,
      AppntName_CN: '',
      AppntSex: '',
      AppntNativePlace: '',
      AppntBirthday: '',
      AppntIDType: '',
      AppntIDNo: '',
      AppntIDEndDate: '',
      MainRiskCode: '',
      prdName: '',
      startAmount: '',
      minUnit: '',
      AvailableBalance: ''
    }
  },
  methods: {
    gotoBuySure () {
      this.$router.push({name: 'InsuranceBuyResult'})
    },
    checkClick1 () {
      if (this.checked1) {
        this.checked1 = false
      } else {
        this.checked1 = true
      }
    },
    checkClick2 () {
      if (this.checked2) {
        this.checked2 = false
      } else {
        this.checked2 = true
      }
    },
    getInsuranceInfoData () {
      let self = this
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({'requstSource': 'internetRequest', 'url': 'mstep.do?act=business', 'params': {'method_Name': 'InsuranceTrial'}}),
        function (response) {
          response = JSON.parse(response)
          if (response.status === 0 || response.status === '0') {
            let data = response.data.data[0]
            self.AppntName_CN = data.AppntName_CN
            self.AppntSex = data.AppntSex
            self.AppntNativePlace = data.AppntNativePlace
            self.AppntBirthday = data.AppntBirthday
            self.AppntIDType = data.AppntIDType
            self.AppntIDNo = data.AppntIDNo
            self.AppntIDEndDate = data.AppntIDEndDate
            self.MainRiskCode = data.MainRiskCode
            self.prdName = data.prdName
            self.startAmount = data.startAmount
            self.minUnit = data.minUnit
            self.AvailableBalance = data.AvailableBalance
          } else {
            alert('fail')
          }
        }
      )
    },
    back () {
      this.$publicFun.goBack(this)
    }
  },
  created () {
    this.getInsuranceInfoData()
  }
}
</script>

<style lang="less">
.InsuranceInfo{
  .dy-body{
    .bodyInfo{
      .titleMsg{
        height: 1rem;
        line-height: 1rem;
        font-size: 0.3rem;
        padding-left: 0.3rem;
        color: #333333;
        font-weight: bolder;
      }
      .checkClause{
        padding-top: 0.2rem;
        display: flex;
        .rightText{
          color: #999999;
          font-size: 0.26rem;
          width: 6.3rem;
          text-align: justify;
          left: -0.18rem;
          padding-left: 0.1rem;
          display: inline-block;
          position: relative;
          >span{
            color: #3333ff;
          }
        }
        .rightText2{
          margin-top: 0.05rem;
        }
        .leftCheck{
          .box{
            height: 0.26rem;
            width: 0.26rem;
            border: 1px solid #BFBFBF;
            margin: 0.1rem 0.2rem 0 0.3rem;
            .checkIcon{
              position: relative;
              top: -0.05rem;
              width:0.27rem;
              height: 0.27rem;
            }
          }
        }
      }
      .tipMsg{
        color: #999999;
        font-size: 0.26rem;
        margin: 0.3rem 0.3rem;
        >p{
          text-align: justify;
          padding-bottom: 0.34rem;
        }
      }
      .nextButton{
        width: 92%;
        height: 0.88rem;
        margin: 0.68rem auto;
        background: #EC1B30;
        text-align: center;
        line-height: 0.88rem;
        color: #fff;
        border-radius: 0.06rem;
      }
    }
  }
}
</style>
